import { type DeepReadonly, type InjectionKey, type UnwrapNestedRefs, reactive, readonly } from 'vue';
import type { $AllSizeUnitStr, $SizeUnitStr } from '../types/interface';
import { isObject } from '../utils/verify';

/** ID 的类型（也是 Provide/Inject中装的值的类型） */
export type GridID = `__MXP-GRID-${string}__`;

/** mxp-grid-item组件中需要mxp-collapse组件传递的数据 */
export type MxpGridProps = {
  /** 分成几列 */
  col: number;
  /** 每个 mxp-grid-item 的 左右间距 */
  xSpace: $SizeUnitStr;
  /** 每个 mxp-grid-item 的 上下间距 */
  ySpace: $SizeUnitStr;
  /** 每个 mxp-grid-item 的 宽度 */
  itemWidth: $AllSizeUnitStr;
  /** 每个 mxp-grid-item 的 高度 */
  itemHeight: $AllSizeUnitStr | 'auto' | 'square';
};

export type MxpGridConfig = {
  /** mxp-grid-item组件中需要mxp-grid组件传递的数据 */
  gridProps?: MxpGridProps;
  /** 更新折叠状态(如果是折叠状态就删除 key ，如果是未折叠状态就添加 key)  */
  changeUnfoldByKey?: (key: number | string) => void;
};

/** 存储变量（内部使用） */
const mxpGridConfigs = reactive<Record<string, MxpGridConfig>>({});

/** Provide/Inject的 key */
export const gridInjectKey: InjectionKey<GridID> = Symbol('__mxp-grid-config-id__');

/** 自定义的状态管理对象 */
export function mxpGridStore() {
  return {
    state: readonly(mxpGridConfigs) as DeepReadonly<UnwrapNestedRefs<Record<string, MxpGridConfig>>>,
    actions: {
      /** 设置 mxp-form 的 props */
      setGridProps(id: GridID, gridProps: MxpGridProps) {
        if (isObject(mxpGridConfigs[id])) {
          mxpGridConfigs[id].gridProps = gridProps;
        } else {
          mxpGridConfigs[id] = { gridProps };
        }
      },
      /** 设置 changeUnfoldByKey 方法 */
      setChangeUnfoldByKeyFun(id: GridID, changeUnfoldByKey: MxpGridConfig['changeUnfoldByKey']) {
        if (isObject(mxpGridConfigs[id])) {
          mxpGridConfigs[id].changeUnfoldByKey = changeUnfoldByKey;
        } else {
          mxpGridConfigs[id] = { changeUnfoldByKey };
        }
      },
      /** 通过 ID 删除 */
      delItemByID(id: GridID) {
        if (mxpGridConfigs[id]) {
          delete mxpGridConfigs[id];
        }
      },
    },
  };
}
